@import '../../styles/variables.less';

.not-found-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #040a18, #061224);
  position: relative;
  overflow: hidden;
  
  .glitch-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      linear-gradient(rgba(0, 150, 255, 0.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 150, 255, 0.02) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: 1;
    opacity: 0.6;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        radial-gradient(circle at 20% 30%, rgba(0, 100, 255, 0.07) 0%, transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(0, 180, 255, 0.05) 0%, transparent 60%);
      z-index: -1;
    }
    
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: repeating-linear-gradient(
        transparent,
        rgba(0, 175, 255, 0.03) 1px,
        transparent 2px
      );
      pointer-events: none;
      animation: glitch 4s linear infinite;
      opacity: 0.3;
    }
  }
  
  .not-found-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 30px;
    
    .not-found-code {
      display: flex;
      margin-bottom: 20px;
      
      .digit {
        font-size: 120px;
        font-weight: 600;
        font-family: monospace, sans-serif;
        background: linear-gradient(to bottom, #fff, #66cdff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 0 15px rgba(0, 200, 255, 0.7);
        position: relative;
        animation: pulse 2s infinite alternate;
        
        &:first-child {
          animation-delay: 0s;
        }
        
        &:nth-child(2) {
          animation-delay: 0.3s;
        }
        
        &:last-child {
          animation-delay: 0.6s;
        }
        
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0.3;
          background: linear-gradient(315deg, transparent 30%, rgba(0, 200, 255, 0.4));
          animation: glitch-digit 2s infinite;
          z-index: -1;
        }
      }
    }
    
    .not-found-title {
      font-size: 28px;
      font-weight: 500;
      color: #a3daff;
      margin-bottom: 16px;
      text-shadow: 0 0 10px rgba(0, 180, 255, 0.3);
    }
    
    .not-found-message {
      color: rgba(163, 218, 255, 0.7);
      font-size: 16px;
      max-width: 400px;
      margin-bottom: 40px;
    }
    
    .not-found-actions {
      display: flex;
      gap: 16px;
      
      .action-btn {
        height: 40px;
        min-width: 120px;
        font-size: 15px;
        border-radius: 4px;
        
        &.back-btn {
          color: #a3daff;
          border-color: rgba(0, 180, 255, 0.4);
          background: rgba(0, 30, 60, 0.3);
          
          &:hover {
            border-color: rgba(0, 200, 255, 0.7);
            color: #fff;
            background: rgba(0, 50, 100, 0.4);
            box-shadow: 0 0 10px rgba(0, 140, 255, 0.3);
          }
        }
        
        &.home-btn {
          background: linear-gradient(90deg, #0067ff, #00a8ff);
          border: none;
          box-shadow: 0 0 15px rgba(0, 140, 255, 0.4);
          
          &:hover {
            background: linear-gradient(90deg, #0078ff, #00c8ff);
            box-shadow: 0 0 20px rgba(0, 180, 255, 0.6);
            transform: translateY(-1px);
          }
          
          &:active {
            transform: translateY(1px);
            box-shadow: 0 0 10px rgba(0, 140, 255, 0.4);
          }
        }
      }
    }
  }
}

@keyframes pulse {
  0% {
    text-shadow: 0 0 15px rgba(0, 200, 255, 0.7);
  }
  100% {
    text-shadow: 0 0 25px rgba(0, 240, 255, 0.9);
  }
}

@keyframes glitch {
  0% {
    transform: translateX(0);
    opacity: 0.3;
  }
  20% {
    transform: translateX(0);
    opacity: 0.3;
  }
  21% {
    transform: translateX(5px);
    opacity: 0.5;
  }
  23% {
    transform: translateX(0);
    opacity: 0.3;
  }
  40% {
    transform: translateX(0);
    opacity: 0.3;
  }
  41% {
    transform: translateX(-5px);
    opacity: 0.5;
  }
  43% {
    transform: translateX(0);
    opacity: 0.3;
  }
  100% {
    transform: translateX(0);
    opacity: 0.3;
  }
}

@keyframes glitch-digit {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(3px);
  }
  50% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(1px);
  }
  100% {
    transform: translateX(0);
  }
} 